<script setup>
import { useCartStore } from '@/stores/modules/cart'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { selectedCartIds } from '@/apis/cart.js'
const router = useRouter()
const multipleTableRef = ref()

const cartStore = useCartStore()
const multipleSelection = ref([])
const handleSelectionChange = (cart) => {
  multipleSelection.value = cart
}

const handleChange = (currentValue, oldValue, row) => {
  row.count += currentValue - oldValue
  if (row.count === 0) {
    cartStore.delCart(row.skuId)
  } else {
    row.count = currentValue - oldValue
    cartStore.addCart(row)
  }
}

const totalPrice = computed(() => {
  return multipleSelection.value.reduce((a, b) => {
    return a + b.count * b.nowPrice
  }, 0)
})
const perOrder = async () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.error('请选择下单商品')
    return
  }
  const skuIds = multipleSelection.value.map((item) => {
    return item.skuId
  })
  await selectedCartIds(skuIds, true)
  await router.push('/checkout')
}
</script>
<template>
  <div class="cart-list w">
    <el-table
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
      :data="cartStore.cartList"
      style="width: 100%"
      row-key="skuId"
    >
      <el-table-column type="selection" width="55" align="center" header-align="center" />
      <el-table-column prop="picture" label="" align="center" header-align="center">
        <template #default="{ row }">
          <img
            :src="row.picture"
            alt="商品图片"
            style="width: 80px; height: 80px; object-fit: cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品信息" align="center" header-align="center" />
      <el-table-column prop="nowPrice" label="单价" align="center" header-align="center" />
      <el-table-column prop="count" label="数量" align="center" header-align="center">
        <template #default="{ row }">
          <el-input-number
            :model-value="row.count"
            :min="0"
            :max="1000"
            @change="(cur, old) => handleChange(cur, old, row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="小计" align="center" header-align="center">
        <template #default="{ row }">
          {{ row.count * row.nowPrice }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center">
        <template #default="{ row }">
          <el-button type="success" text @click="cartStore.delCart(row.skuId)"> 删除 </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="快去选中你喜欢的商品吧" />
      </template>
    </el-table>
    <div class="total">
      <div>
        <span
          >共{{ cartStore.totalNum }}件商品，已选择{{
            multipleSelection.length
          }}件，商品合计：</span
        >
        <span class="price">￥{{ totalPrice }}</span>
      </div>
      <div class="btm">
        <el-button type="primary" @click="perOrder">下单结算</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cart-list {
  margin-top: 20px;

  .total {
    height: 60px;
    line-height: 60px;
    background-color: white;

    padding: 0 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

    .price {
      color: red;
    }
  }
}
</style>
